<template>
  <div class="zk">
    <div class="zk-title">
      <svg v-if="showloc" t="1583384546790" class="loc" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2960" width="16" height="16"><path d="M512 85.333333C347.093333 85.333333 213.333333 219.050667 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 219.050667 676.906667 85.333333 512 85.333333ZM512 520.533333C436.629333 520.533333 375.466667 459.413333 375.466667 384 375.466667 308.586667 436.629333 247.466667 512 247.466667 587.413333 247.466667 648.490667 308.586667 648.490667 384 648.490667 459.413333 587.413333 520.533333 512 520.533333Z" p-id="2961" fill="#d81e06"></path></svg>
      {{title}}
    </div>
    <div class="zk-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    showloc: Boolean
  }
}
</script>

<style lang="scss">
.zk {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  .loc {
    position: relative;
    top: 4px;
  }
  &:hover {
    background-color: #fff;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    .zk-content {
      display: block;
      background-color: #fff;
    }
    &:after {
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      background-color: #fff;
    }
  }
  .zk-content {
    padding: 10px;
    display: none;
    position: absolute;
    border: 1px solid #aaa;
    left: -1px;
    box-shadow: #ccc 1px 1px 1px;
  }
}
</style>
